<!doctype html>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Todo list</title>

  <link rel="stylesheet" type="text/css" title="Default Style" href="../../style/style.css" media="screen" />

  <style type="text/css" id="demo-css">

    #demo-container
    {
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    #TodoListPanel
    {
      height: 100%;
      float: left;
      width: 300px;
      border-right: 3px solid #D9E8FB;
    }

    .Basis-Calendar
    {
      height: 100%;
      overflow: hidden;
      position: relative;
      width: auto;
    }

    .Basis-Calendar-Header,
    .Basis-Calendar-Footer
    {
      display: none;
    }
    .Basis-Calendar-Body
    {
      border: none;
      position: static;
    }
    .Basis-Calendar-Section
    {
      position: static;
      width: auto;
      height: auto;
    }
    .Basis-Calendar-SectionContent
    {
      border: none;
      position: absolute;
      top: 40px;
      bottom: 0;
      left: 0;
      right: 0;
      height: auto;
      overflow: visible;
    }
    .Basis-Calendar-MonthWeekDays
    {
      position: absolute;
      bottom: 100%;
    }
    .Basis-Calendar-MonthWeekDays-Day
    {
      width: 14.28%;
    }
    .Basis-Calendar-Section-Month .Basis-Calendar-Node
    {
      width: 14.2%;
      height: 16%;
      border-right: 1px solid #E0E0E0;
      border-bottom: 1px solid #E0E0E0;
    }

    .taskList
    {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .taskList LI
    {
      margin: 0;
      padding: 4px .5ex;
      list-style: none;
      border-bottom: 1px solid #E8E8E8;
      text-align: left;
      cursor: pointer;
    }
    .taskList LI:hover
    {
      background: #F0F0F0;
    }
    .taskList INPUT
    {
      float: right;
      margin: 2px;
      position: relative;
    }
    .taskList .date
    {
      font-size: 80%;
      padding: 2px .75ex;
      margin-right: .75ex;
      background: #F4F4F4;
      border-radius: 3px;
    }
    .taskList .IsDone
    {
      color: #888;
      text-decoration: line-through;
    }
    .taskList .deleteButton
    {
      color: #880000;
      padding: 2px;
      background: #FFF0F0;
      margin-right: 2px;
    }
    .Basis-Calendar-Node
    {
      padding: 0 !important;
    }
    .Basis-Calendar-Node .title
    {
      background: rgba(0,0,0,.05);
      display: block;
      padding: .25em;
    }
    .Basis-Calendar-Node LI
    {
      border: none;
      background: rgba(255,255,255,.2);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 4px;
    }
    .Basis-Calendar-Node LI:hover
    {
      background: rgba(255,255,255,.5);      
    }
    .Basis-Calendar-Node .date
    {
      display: none;
    }
    .Basis-Calendar-Node INPUT
    {
      display: none;
      margin: -1px -1px;
    }
    .Basis-Calendar-Node:hover INPUT
    {
      display: block;
    }
  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis-all.js"></script>
  <script type="text/javascript" src="../../locale/ru/calendar.js"></script>
  <script type="text/javascript" src="../../locale/ru/form.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basis Demos: Todo list</h1>

  <p id="demo-summary">
    ...
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script id="demo-javascript" type="text/javascript">

    basis.dom.event.onLoad(function(){
      var DOM = basis.dom;
      var nsData = basis.data;
      var nsUI = basis.ui;
      var nsEntity = basis.entity;
      var nsCalendar = basis.ui.calendar;
      var nsLayout = basis.layout;

      var classList = basis.cssom.classList;

      //
      // Data
      //

      var Task = new nsEntity.EntityType({
        name: 'Task',
        fields: {
          TaskId: nsEntity.NumberId,
          IsDone: Boolean,
          Date: Function.$self,
          Text: String
        }
      });

      var taskByDate = new nsData.dataset.Split({
        source: Task.all,
        rule: function(task){
          return task.data.Date.toISODateString();
        }
      });

      var taskByDone = new nsData.dataset.Split({
        source: Task.all,
        rule: function(task){
          return task.data.IsDone;
        }
      });

      //
      // Classes
      //

      var TaskNode = basis.ui.Node.subclass({
        template:
          '<li event-click="edit">' +
            '<span class="deleteButton" event-click="destroy">delete</span>' +
            '<input{isDone} type="checkbox" event-click="invertDone"/>' +
            '<span class="date">{date}</span>' +
            '{text}' +
          '</li>',

        action: {
          invertDone: function(){
            this.update({
              IsDone: !this.data.IsDone
            });
          },
          edit: function(){
            taskWindow.setDelegate(this.target);
          },
          destroy: function(){
            this.target.destroy();
          }
        },

        templateUpdate: function(tmpl, eventName, delta){
          tmpl.date.nodeValue = this.data.Date.toFormat('%D.%M.%Y');
          tmpl.text.nodeValue = this.data.Text;

          tmpl.isDone.checked = this.data.IsDone;
          classList(this.element).bool('IsDone', this.data.IsDone);
        }
      });

      var TaskList = basis.ui.Container.subclass({
        template:
          '<ul class="taskList"/>',

        childClass: TaskNode
      });

      //
      // Instances
      //

      var todoList = new TaskList({
        sorting: Function.getter('data.Date', Number)
      });

      var todoTabs = new basis.ui.tabs.TabControl({
        childClass: {
          titleGetter: function(tab){
            var title = tab.delegate === Task.all
              ? 'All tasks'
              : tab.data.title
                ? 'Complete tasks'
                : 'Uncomplete tasks';
            return title + ' (' + (this.data.itemCount || 0) + ')';
          },
          listen: {
            delegate: {
              datasetChanged: function(dataset, delta){
                this.update({
                  itemCount: dataset.itemCount
                });
              }
            }
          }
        },

        childNodes: [
          Task.all,
          taskByDone.getSubset(true, true),
          taskByDone.getSubset(false, true)
        ],

        selection: {
          handler: {
            datasetChanged: function(dataset, delta){
              var selected = this.pick();
              if (selected)
                todoList.setDataSource(selected.delegate);
            }
          }
        }
      });

      var todoCalendar = new nsCalendar.Calendar({
        sections: null,
        childNodes: [
          new nsCalendar.CalendarSection.Month({
            childClass: {
              template:
                '<div{element} class="Basis-Calendar-Node" event-click="click">' +
                  '<span class="title">{title}</span>' +
                  '<!--{taskList}-->' +
                '</div>',

              satelliteConfig: {
                taskList: {
                  dataSource: function(owner){
                    return taskByDate.getSubset(owner.data.periodStart.toISODateString(), true);
                  },
                  instanceOf: TaskList
                }
              }
            }
          })
        ]
      });

      var taskForm = new basis.ui.form.FormContent({
        autoDelegate: basis.dom.wrapper.DELEGATE.PARENT,
        handler: {
          targetChanged: function(){
            if (this.target)
              this.loadData(this.data);
          }
        },
        childNodes: [
          {
            type: 'textarea',
            name: 'Text'
          }
        ],
        submit: function(){
          this.update(this.serialize());
        }
      });

      var taskWindow = new basis.ui.window.Window({
        title: 'Task editor',
        childNodes: [
          taskForm
        ],
        buttons: [
          {
            caption: 'OK',
            click: function(){
              taskForm.submit();
              this.close();
            }
          },
          {
            caption: 'Cancel'/*,
            click: function(){
              if (!this.data.TaskId)
                this.delegate.destroy();
            }*/
          }
        ],
        handler: {
          delegateChanged: function(){
            if (this.delegate)
              this.open();
            else
              this.close();
          },
          close: function(){
            this.setDelegate();
          }
        }
      });

      //
      // App layout
      //

      DOM.insert('demo-container', [
        (new nsLayout.VerticalPanelStack({
          id: 'TodoListPanel',
          childNodes: [
            {
              childNodes: [
                new nsUI.Node({
                  id: 'AddTaskButton',
                  template: '<button event-click="add">+</button>',
                  action: {
                    add: function(){
                      taskWindow.setDelegate(Task({ Date: new Date() }));
                    }
                  }
                }),
                todoTabs
              ]
            },
            {
              flex: 1,
              childNodes: todoList
            }
          ]
        })).element,
        todoCalendar.element
      ]);

      //
      // Load test data
      //

      Task.all.sync([
        { Date: new Date(2011, 07, 05), Text: 'test1' },
        { Date: new Date(2011, 07, 01), Text: 'test2', IsDone: true },
        { Date: new Date(2011, 08, 05), Text: 'test3' },
        { Date: new Date(2011, 07, 01), Text: 'test4' },
        { Date: new Date(), Text: 'test5 asd asd asdasd asdasdasd' },
        { Date: new Date(2011, 07, 15), Text: 'test5' },
        { Date: new Date(2011, 07, 03), Text: 'test6' },
        { Date: new Date(2011, 07, 05), Text: 'test5 asd asd asdasd asdasdasd' }
      ]);

    });

  </script>  
</body>

</html>